<template>
  <d2-container>
    <div class="bg">
      <el-card :body-style="{background: 'transparent', padding: '0px'}" class="small-card">
        <div slot="header" class="small-header">
          <span>快捷导航</span>
        </div>
        <el-row>
          <el-col :span="8" v-for="({name,icon,route,color},index) of navigators" :key="index" style="padding: 0">
            <el-card shadow="hover" style="height: 50px">
              <div style="display: flex;align-items: center;flex-direction: column;cursor: pointer"
                   @click="()=>{gotoRoute(route)}">
                <div style="display: flex;align-items: center">
                  <d2-icon-svg :name="icon" style="width: 20px;height: 20px;margin-right: 5px;" :style="{fill:color}"/>
                  <div style="text-align: center;font-size: 14px" v-text="name"></div>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </el-card>
    </div>
  </d2-container>
</template>

<script>

export default {
  name: 'workbench',
  data () {
    return {
      navigators: [
        {
          name: '算子管理',
          icon: 'user',
          route: {
            path: '/opmanage'
          },
          color: 'rgb(255, 165, 0);'
        },
        {
          name: '流程管理',
          icon: 'user',
          route: {
            path: '/dag/manage'
          },
          color: 'rgb(255, 165, 0);'
        },
        {
          name: '项目管理',
          icon: 'user',
          route: {
            path: '/project/my'
          },
          color: 'rgb(124, 252, 0);'
        },
        {
          name: '模型管理',
          icon: 'user',
          route: {
            path: '/model/my'
          },
          color: 'rgb(255, 69, 0);'
        },
        {
          name: '数据管理',
          icon: 'user',
          route: {
            path: '/data/my'
          },
          color: 'rgb(63, 178, 127);'
        },
        {
          name: '服务管理',
          icon: 'user',
          route: {
            path: '/service/my'
          },
          color: 'rgb(255, 99, 71);'
        }
      ]
    }
  },
  methods: {
    gotoRoute (route) {
      this.$router.push(route)
    }
  }
}
</script>

<style scoped lang="scss">
h1 {
  font-size: 30px;
  color: #333;
  margin: 20px 0 30px 0;
}
.small-card {
  position: fixed;
  bottom: 30px;
  left: 258px;
  width: 400px;
  height: 150px;
  margin: 20px;
}
.small-header {
  height: 10px;
  padding: 0;
  margin: 0;
  line-height: 10px;
  font-size: 16px;
}
.bg {
  background-image: url('./assets/bg.png');
  background-size: cover;
  background-position: center center;
  height: 100%;
}
</style>
